<template>
  <div>
    <div class="banner container-fuild text-center">客户订单</div>

    <el-collapse v-model="activeName"
                 accordion>
      <el-collapse-item v-for="(item,index) in orderList"
                        :key="index"
                        class="collapse-item"
                        :class="statusColor(item)"
                        show-overflow-tooltip>
        <template slot="title">
          <div class="table-item">
            <div>
              <div class="item-content">
                <div class="item-titleinfo">
                  <div class="item-logo">
                    <img class="item-logo-img"
                         src=""
                         alt="">
                  </div>
                  <div class="item-name">{{item.product_name}}</div>
                  <div class="item-linetime">{{getproduct_type(item.product_type)}}</div>
                </div>
                <div class="item-maininfo">
                  <div class="item-company">货物：
                    <span class="item-company-text">{{item.goods_name}}</span>
                  </div>
                  <div class="item-date">
                    <span class="item-date-text">创建时间：{{item.create_time}}</span>
                    <span class="able-date"></span>
                  </div>
                </div>
                <div class="item-start-end">
                  <div class="item-start">
                    <div class="start-name">
                      <span class="start-point">起</span>{{item.start_point_name}}
                    </div>
                    <div class="start-date">ETD：{{item.etd_time}}</div>
                  </div>
                  <div class="arrow-logo">
                    <img src=""
                         alt="">
                  </div>
                  <div class="item-end">
                    <div class="end-name">
                      <span class="end-point">终</span>{{item.end_point_name}}
                    </div>
                    <div class="end-date">ETA：{{item.eta_time}}</div>
                  </div>
                </div>

                <div class="item-start-end">
                  <div class="start-name"
                       style="padding-right:40px">
                    <el-tag :type="status_type"
                            size="big">{{status_text}}</el-tag>
                  </div>
                  <div class="start-name"
                       style="padding-right:40px">
                    <span class="item-date-text">支付条款：{{item.product_paytype}}</span>
                  </div>
                  <div class="end-name">
                    <span style="font-weight:600">{{item.total_price+'  '}}CNY</span>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </template>
        <!-- 下拉内容 -->
        <div class="xiala">
          <div class="col-xs-16 col-sm-16 col-md-8">
            <el-card class="box-card">
              <el-descriptions class="margin-top"
                               title="订单详情"
                               :column="4"
                               :size="size"
                               border>
                <!-- <template slot="extra">
                  <el-button type="primary" size="small">操作</el-button>
                </template> -->
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-user"></i> -->
                    代运商
                  </template>
                  {{item.company_name}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-mobile-phone"></i> -->
                    代运商代码
                  </template>
                  {{item.company_code}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    电话
                  </template>
                  {{item.company_finance_iphone}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    业务人
                  </template>
                  {{item.company_finance_user}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-location-outline"></i> -->
                    承运商
                  </template>
                  {{item.carrier_name}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-tickets"></i> -->
                    承运商代码
                  </template>
                  {{item.carrier_code}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    电话
                  </template>
                  {{item.carrier_finance_iphone}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    业务人
                  </template>
                  {{item.carrier_finance_user}}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    取货地址
                  </template>
                  {{item.start_address}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    收货地址
                  </template>
                  {{item.end_address}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    电话
                  </template>
                  {{item.owner_iphone}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-location-outline"></i> -->
                    货主
                  </template>
                  {{item.owner_name}}
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    箱量
                  </template>
                  {{item.product_num}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    毛重(/KGS)
                  </template>
                  {{item.product_weight}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-office-building"></i> -->
                    体积(/CBM)
                  </template>
                  {{item.product_volume}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-location-outline"></i> -->
                    价格(/T)
                  </template>
                  {{item.product_price}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <!-- <i class="el-icon-location-outline"></i> -->
                    备注
                  </template>
                  {{item.remark}}
                </el-descriptions-item>

              </el-descriptions>
              <div class="order_btn">
                <el-button icon="el-icon-search"
                           @click="callclient">联系客户</el-button>
                <el-button v-if="item.order_status !== '2'"
                           type="primary"
                           @click="updateOrder_status(item)">确认发货</el-button>
              </div>

            </el-card>
            <el-dialog :visible.sync="centerDialogVisible"
                       width="20%"
                       center>
              <el-card class="lianxikehu">
                <i class="el-icon-phone"></i>
                <span>：{{item.owner_iphone}}</span>
              </el-card>
            </el-dialog>
          </div>
          <div class="col-xs-8 col-sm-8 col-md-4 ">
            <el-timeline class="timeline"
                         @click.native="gomap(item)">
              <!-- v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.timestamp" -->
              <el-timeline-item size="large"
                                :color="item.actual_time ? '#88d18a' : '#7db9ff'"
                                :icon="item.actual_time ? 'el-icon-check' : 'el-icon-more' "
                                :timestamp="item.actual_time">
                离开出发地
              </el-timeline-item>
              <el-timeline-item size="large"
                                :color="timeline_color(item)"
                                :icon="timeline_icon">
                运输途中
              </el-timeline-item>
              <el-timeline-item size="large"
                                :color="item.order_status === '3' ? '#88d18a' : ''"
                                :icon="item.order_status === '3' ? 'el-icon-check' : ''"
                                :timestamp="item.actual_time === '3' ? item.eta_time : '...' ">
                到达目的地
              </el-timeline-item>
              <el-timeline-item size="large"
                                timestamp="...">
                财务核算
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>

      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
export default {
  data () {
    return {
      orderList: [],
      // activeName: '1',
      activities: [{
        content: '离开出发地',
        timestamp: '',
        size: 'large',
        type: 'primary',
        color: '#0bbd87',

      }, {
        content: '运输途中',
        // timestamp: '2018-04-03 20:46',
        icon: 'el-icon-more',
        type: 'primary',


      }, {
        content: '到达目的地',
        timestamp: '...',
        size: 'large'
      }, {
        content: '财务核算',
        timestamp: '...'
      }],
      // status_type: '',
      // status_text: '',
      centerDialogVisible: false
    }
  },
  created () {
    this.getorder()
  },
  methods: {
    // 数据没对上
    getorder () {
      const api = `clientorder?users_id=${this.$store.getters.userinfo.users_id}`
      this.$axios.get(api)
        .then(res => {
          // console.log("客户订单：", res.data)
          this.orderList = res.data
          console.log('订单列表：', this.orderList)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getproduct_type (data) {
      switch (data) {
        case 'sea':
          return "海运"
        case 'line':
          return "陆运"
        case 'air':
          return "空运"
        case 'railway':
          return "铁路"
        default:
          console.log('其他类型')
          return
      }
    },
    // gettimestamp(){
    //   return 1
    // }
    gomap (item) {
      console.log('dianjil')
      this.$router.push(
        {
          name: 'map',
          params: { item: item }
        })
    },
    statusColor (item) {
      let color
      // console.log('状态：', item.order_status);
      if (item.order_status === null) {
        color = 'orange'
        this.status_text = '待审核'
        this.status_type = 'warning'
      } else if (item.order_status === '0') {
        color = 'red'
        this.status_text = '审核不通过'
        this.status_type = 'danger'
      } else if (item.order_status === '1') {
        color = 'yellow'
        this.status_text = '待发货'
        this.status_type = 'warning'
      } else if (item.order_status === '2') {
        color = 'blue'
        this.status_text = '运输中'
        this.status_type = 'default'
      } else if (item.order_status === '3') {
        color = 'green'
        this.status_text = '已到达'
        this.status_type = 'success'
      }

      return color
    },
    // 联系客户
    callclient (item) {
      this.centerDialogVisible = true
    },
    // 确认发货
    updateOrder_status (item) {
      console.log(item.order_status);
      // item.order_status = '2'
      const obj = {
        order_status: '2',
        actual_time: this.utils.getNowTime(),
        order_id: item.order_id
      }
      const api = `updateorder`
      this.$axios.post(api, obj)
        .then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '发货成功!'
          });
          this.getorder()
        })
        .catch(err => {
          console.log(err)
          this.$message({
            type: 'danger',
            message: '请求失败！'
          });
        })
    },
    timeline_color (item) {
      let color
      if (item.actual_time === null) {
        color = ''
        this.timeline_icon = ''
      } else if (item.order_status === '2') {
        color = '#7db9ff'
        this.timeline_icon = 'el-icon-more'
      } else if (item.order_status === '3') {
        color = '#88d18a'
        this.timeline_icon = 'el-icon-check'
      }
      return color
    }


  }
}

</script>

<style lang="less">
/* 表格 */

.banner {
  color: #fff;
  font-size: 30px;
  height: 190px;
  line-height: 190px;
  background-image: url("../../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}

.table-item {
  /* display: flex; */
  height: 100%;
  width: 100%;
  /* padding-left: 30px; */
  /* padding-right: 50px; */
}
.el-collapse-item__header {
  height: 130px;
  margin: 40px 250px;
  padding: 0px 0px 0px 20px;
  border: 3px solid rgb(185, 185, 185);
  border-radius: 10px;
  // background-color: #fd8244;
}
.orange {
  background-color: #fd8244;
}
.red {
  background-color: #fb0828;
}
.yellow {
  background-color: #fbce65;
}
.blue {
  background-color: #7db9ff;
}
.green {
  background-color: #88d18a;
}

.item-content {
  height: 124px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 20px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.item-titleinfo {
  width: 110px;
  text-align: center;
}
.item-logo {
}
.item-name {
  font-size: 16px;
  color: #888;
  padding: 0 10px;
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  word-break: break-all;
  margin: 0 auto;
}
.item-linetime {
  font-size: 16px;
  color: #4198c7;
}

.item-maininfo {
}
.item-company {
  font-size: 16px;
  color: #666;
}
.item-company-text {
  font-size: 18px;
  color: #4198c7;
  font-weight: 600;
}
.item-date {
  color: #07467c;
  font-size: 14px;
}
.item-date-text {
  color: #666;
  font-size: 16px;
}
.able-date {
  margin-left: 20px;
}

.item-start-end {
  padding-right: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.item-start {
}
.start-name {
  font-size: 18px;
  color: #4198c7;
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.start-point {
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #07467c;
  color: #fff;
  border-radius: 50%;
}
.start-date {
  color: #4198c7;
  font-size: 14px;
  margin-top: 6px;
}
.arrow-logo {
  margin-right: 25px;
  margin-left: 25px;
  margin-top: 5px;
}
.item-end {
}
.end-name {
  font-size: 18px;
  color: #4198c7;
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.end-point {
  margin-right: 6px;
  font-size: 14px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #bd6664;
  color: #fff;
  border-radius: 50%;
}
.end-date {
  color: #4198c7;
  font-size: 14px;
  margin-top: 6px;
}

/* 下拉内容 */
.xiala {
  margin: 0px 250px;
  padding: 0 20px;
  /* border: 2px solid red; */
  display: flex;
  /* text-align: center; */
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.timeline {
  font-size: 16px;
  padding-left: 50%;
}
.timeline:hover {
  border: 2px solid rgb(177, 175, 175);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgb(177, 175, 175);
  cursor: pointer;
}
// 订单按钮
.order_btn {
  padding-top: 20px;
  display: flex;
  justify-content: center;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 联系客户
.lianxikehu {
  margin: 40px auto;
  text-align: center;
  font-size: 18px;
  /* background-color: rgba(225, 225, 225, 0.8); */
}
</style>
